<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.51">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/blog/images/logo.png"><link rel="stylesheet" href="/blog/css/common.scss"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><script language="javascript" type="text/javascript" src="/blog/js/jquery.min.js"></script><title>面试题 | hhのBlog</title><meta name="description" content="A blog about work and life">
    <link rel="modulepreload" href="/blog/assets/app.af94fc38.js"><link rel="modulepreload" href="/blog/assets/面试题2022111401.html.51141716.js"><link rel="modulepreload" href="/blog/assets/面试题2022111401.html.475fb69e.js"><link rel="prefetch" href="/blog/assets/index.html.66bbb558.js"><link rel="prefetch" href="/blog/assets/demo.html.5b7805fb.js"><link rel="prefetch" href="/blog/assets/20221108.html.f09e60bb.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111301.html.ec3c03ed.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111302.html.f6e335a9.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111303.html.c0dc6265.js"><link rel="prefetch" href="/blog/assets/CSS_2022111401.html.5f0453af.js"><link rel="prefetch" href="/blog/assets/20221108.html.4bd4ca47.js"><link rel="prefetch" href="/blog/assets/20221115.html.324de47f.js"><link rel="prefetch" href="/blog/assets/20221116.html.0d3a3d59.js"><link rel="prefetch" href="/blog/assets/js01example.html.7d266980.js"><link rel="prefetch" href="/blog/assets/js01基础.html.0408303d.js"><link rel="prefetch" href="/blog/assets/js02域名.html.2f781f87.js"><link rel="prefetch" href="/blog/assets/js03保留小数.html.52d104e4.js"><link rel="prefetch" href="/blog/assets/js04常用正则.html.91ba30f3.js"><link rel="prefetch" href="/blog/assets/js05定时器.html.3304c7db.js"><link rel="prefetch" href="/blog/assets/01相关命令.html.d137a3a8.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111301.html.a182f227.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111302.html.da1bce3a.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111303.html.d48c88c8.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111304.html.82c5514a.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111201.html.440c0e4b.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111202.html.e6a8a1db.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111203.html.f1426fe0.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111204.html.e10b7300.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111205.html.4103afd7.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111206.html.d2a54f87.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111207.html.3e95d323.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111208.html.e09e295e.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111209.html.2b200f73.js"><link rel="prefetch" href="/blog/assets/Vue3_2022111301.html.21919b21.js"><link rel="prefetch" href="/blog/assets/Vue_2022111301.html.ef40b3e0.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111301.html.86e597e2.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111302.html.7e66ee69.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111303.html.631f3db6.js"><link rel="prefetch" href="/blog/assets/vue2-10-下载文件流.html.f941e773.js"><link rel="prefetch" href="/blog/assets/2023.html.9b68f9e4.js"><link rel="prefetch" href="/blog/assets/info.html.a848c235.js"><link rel="prefetch" href="/blog/assets/guide.html.e425151d.js"><link rel="prefetch" href="/blog/assets/前端技术集合.html.cf2a3b37.js"><link rel="prefetch" href="/blog/assets/index.html.d2d3b8ef.js"><link rel="prefetch" href="/blog/assets/01简介.html.40ba5a67.js"><link rel="prefetch" href="/blog/assets/Button.html.8c129817.js"><link rel="prefetch" href="/blog/assets/api.html.e0d147e4.js"><link rel="prefetch" href="/blog/assets/home.html.e1e35d1b.js"><link rel="prefetch" href="/blog/assets/home1.html.e4c04026.js"><link rel="prefetch" href="/blog/assets/home2.html.58a624a1.js"><link rel="prefetch" href="/blog/assets/plugin.html.b944638b.js"><link rel="prefetch" href="/blog/assets/theme.html.5ff8341a.js"><link rel="prefetch" href="/blog/assets/info.html.de54f66c.js"><link rel="prefetch" href="/blog/assets/mac上使用iterm2.html.93ceff56.js"><link rel="prefetch" href="/blog/assets/账号网站合集.html.8f9d6378.js"><link rel="prefetch" href="/blog/assets/info.html.3ee938b6.js"><link rel="prefetch" href="/blog/assets/overtime.html.a3b609ca.js"><link rel="prefetch" href="/blog/assets/password.html.f40ffe93.js"><link rel="prefetch" href="/blog/assets/project.html.e6805471.js"><link rel="prefetch" href="/blog/assets/实验室检测.html.8cf7547b.js"><link rel="prefetch" href="/blog/assets/智慧检测平台.html.dd52a4be.js"><link rel="prefetch" href="/blog/assets/跨维产品菜单整理20230203.html.450b6471.js"><link rel="prefetch" href="/blog/assets/404.html.98e87f94.js"><link rel="prefetch" href="/blog/assets/index.html.72ac4063.js"><link rel="prefetch" href="/blog/assets/index.html.8cbdf524.js"><link rel="prefetch" href="/blog/assets/index.html.ce338eac.js"><link rel="prefetch" href="/blog/assets/index.html.73c4a578.js"><link rel="prefetch" href="/blog/assets/index.html.d75650eb.js"><link rel="prefetch" href="/blog/assets/index.html.c5770dab.js"><link rel="prefetch" href="/blog/assets/index.html.d5122042.js"><link rel="prefetch" href="/blog/assets/index.html.c0a5e9ba.js"><link rel="prefetch" href="/blog/assets/index.html.51ae8525.js"><link rel="prefetch" href="/blog/assets/index.html.e53514d3.js"><link rel="prefetch" href="/blog/assets/index.html.09988c79.js"><link rel="prefetch" href="/blog/assets/index.html.eb108376.js"><link rel="prefetch" href="/blog/assets/index.html.2f61b3ca.js"><link rel="prefetch" href="/blog/assets/index.html.08946a35.js"><link rel="prefetch" href="/blog/assets/index.html.e695e9c9.js"><link rel="prefetch" href="/blog/assets/index.html.3d66ccdd.js"><link rel="prefetch" href="/blog/assets/index.html.1ff935f2.js"><link rel="prefetch" href="/blog/assets/index.html.a3ad1cd1.js"><link rel="prefetch" href="/blog/assets/index.html.b57762aa.js"><link rel="prefetch" href="/blog/assets/index.html.08b3a957.js"><link rel="prefetch" href="/blog/assets/index.html.9cbf2d78.js"><link rel="prefetch" href="/blog/assets/index.html.4bc70fa1.js"><link rel="prefetch" href="/blog/assets/index.html.faf16132.js"><link rel="prefetch" href="/blog/assets/demo.html.a850e9b9.js"><link rel="prefetch" href="/blog/assets/20221108.html.46471f50.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111301.html.a5e91418.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111302.html.ff7102b1.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111303.html.bd8b572a.js"><link rel="prefetch" href="/blog/assets/CSS_2022111401.html.be8e29c7.js"><link rel="prefetch" href="/blog/assets/20221108.html.9e6fc05c.js"><link rel="prefetch" href="/blog/assets/20221115.html.5e544c67.js"><link rel="prefetch" href="/blog/assets/20221116.html.663a1bdb.js"><link rel="prefetch" href="/blog/assets/js01example.html.e7f57aff.js"><link rel="prefetch" href="/blog/assets/js01基础.html.2e918579.js"><link rel="prefetch" href="/blog/assets/js02域名.html.d1b1bae3.js"><link rel="prefetch" href="/blog/assets/js03保留小数.html.f3c8d2f4.js"><link rel="prefetch" href="/blog/assets/js04常用正则.html.4266e782.js"><link rel="prefetch" href="/blog/assets/js05定时器.html.444cce0c.js"><link rel="prefetch" href="/blog/assets/01相关命令.html.81697624.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111301.html.1f3a3c9d.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111302.html.db8d0905.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111303.html.3ab1d537.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111304.html.f4686d41.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111201.html.b263cecf.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111202.html.348b7b89.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111203.html.047acc5f.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111204.html.0d2896ce.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111205.html.9768009b.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111206.html.f1e0fa5e.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111207.html.9b090633.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111208.html.daad8d06.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111209.html.7fedd35c.js"><link rel="prefetch" href="/blog/assets/Vue3_2022111301.html.21fe75fc.js"><link rel="prefetch" href="/blog/assets/Vue_2022111301.html.2d5e0d45.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111301.html.60c6a791.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111302.html.751868dc.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111303.html.3fa18bdf.js"><link rel="prefetch" href="/blog/assets/vue2-10-下载文件流.html.b6206ee7.js"><link rel="prefetch" href="/blog/assets/2023.html.0936ae58.js"><link rel="prefetch" href="/blog/assets/info.html.a1a68d8b.js"><link rel="prefetch" href="/blog/assets/guide.html.8a368790.js"><link rel="prefetch" href="/blog/assets/前端技术集合.html.9ca234a3.js"><link rel="prefetch" href="/blog/assets/index.html.edaee29a.js"><link rel="prefetch" href="/blog/assets/01简介.html.5ef2778e.js"><link rel="prefetch" href="/blog/assets/Button.html.af92d008.js"><link rel="prefetch" href="/blog/assets/api.html.f4fa47e2.js"><link rel="prefetch" href="/blog/assets/home.html.e09d15f1.js"><link rel="prefetch" href="/blog/assets/home1.html.08d478e3.js"><link rel="prefetch" href="/blog/assets/home2.html.0a335270.js"><link rel="prefetch" href="/blog/assets/plugin.html.bc46a390.js"><link rel="prefetch" href="/blog/assets/theme.html.73112f00.js"><link rel="prefetch" href="/blog/assets/info.html.b09899b8.js"><link rel="prefetch" href="/blog/assets/mac上使用iterm2.html.129f6a2b.js"><link rel="prefetch" href="/blog/assets/账号网站合集.html.f39ea8dc.js"><link rel="prefetch" href="/blog/assets/info.html.8f33962c.js"><link rel="prefetch" href="/blog/assets/overtime.html.6b269d77.js"><link rel="prefetch" href="/blog/assets/password.html.1ccccfa6.js"><link rel="prefetch" href="/blog/assets/project.html.1ac0116d.js"><link rel="prefetch" href="/blog/assets/实验室检测.html.811b00ea.js"><link rel="prefetch" href="/blog/assets/智慧检测平台.html.74f12da9.js"><link rel="prefetch" href="/blog/assets/跨维产品菜单整理20230203.html.d8e60b11.js"><link rel="prefetch" href="/blog/assets/404.html.761b14a0.js"><link rel="prefetch" href="/blog/assets/index.html.3156a3ca.js"><link rel="prefetch" href="/blog/assets/index.html.0ac8c580.js"><link rel="prefetch" href="/blog/assets/index.html.17c3e87f.js"><link rel="prefetch" href="/blog/assets/index.html.11c9aab7.js"><link rel="prefetch" href="/blog/assets/index.html.4e5ab5fd.js"><link rel="prefetch" href="/blog/assets/index.html.800eacc8.js"><link rel="prefetch" href="/blog/assets/index.html.65e76f2c.js"><link rel="prefetch" href="/blog/assets/index.html.3b91d0bf.js"><link rel="prefetch" href="/blog/assets/index.html.59b51092.js"><link rel="prefetch" href="/blog/assets/index.html.f939c3c1.js"><link rel="prefetch" href="/blog/assets/index.html.de2abe69.js"><link rel="prefetch" href="/blog/assets/index.html.739bd11b.js"><link rel="prefetch" href="/blog/assets/index.html.2d86bd8b.js"><link rel="prefetch" href="/blog/assets/index.html.b093f5ce.js"><link rel="prefetch" href="/blog/assets/index.html.c0a0758f.js"><link rel="prefetch" href="/blog/assets/index.html.3ec16541.js"><link rel="prefetch" href="/blog/assets/index.html.72ba4570.js"><link rel="prefetch" href="/blog/assets/index.html.67fe3a27.js"><link rel="prefetch" href="/blog/assets/index.html.28a05aba.js"><link rel="prefetch" href="/blog/assets/index.html.5342a2c2.js"><link rel="prefetch" href="/blog/assets/index.html.c1a1958b.js"><link rel="prefetch" href="/blog/assets/index.html.267fccd4.js"><link rel="prefetch" href="/blog/assets/reco-valine.ed4545b0.js"><link rel="prefetch" href="/blog/assets/Button.a2ab7687.js"><link rel="prefetch" href="/blog/assets/Demo.3e2abc15.js"><link rel="prefetch" href="/blog/assets/setupDevtools-EXVHPMXB.8c234e79.js">
    <link rel="stylesheet" href="/blog/assets/style.0a08fff0.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper"><div><header class="navbar-container"><span class="nav-item site-brand"><a href="/blog/" class=""><img class="logo" src="/blog/images/logo.png" alt="hhのBlog"><span class="site-name can-hide">hhのBlog</span></a></span><div class="nav-item navbar-links-wrapper" style=""><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/blog/" class="nav-link" aria-label="Home"><!--[--><!--]--> Home <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/categories/ToDoList/1/" class="nav-link" aria-label="Notes"><!--[--><!--]--> Notes <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/tags/Vue/1/" class="nav-link" aria-label="Tags"><!--[--><!--]--> Tags <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/docs/" class="nav-link router-link-active" aria-label="work"><!--[--><!--]--> work <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/blogs/_List/info.html" class="nav-link" aria-label="周计划清单"><!--[--><!--]--> 周计划清单 <!--[--><!--]--></a></div><!--]--></nav><a class="icon-container left btn-toggle-dark-mode" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:19px;height:19px;font-size:19px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"></path><path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2"></path><path d="M19 11h2m-1-1v2"></path></g></svg><!----></a><a class="icon-container left btn-toggle-menus" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle><circle cx="12" cy="5" r="1"></circle></g></svg><!----></a></div></header><div class="mobile-menus-container"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/blog/" class="nav-link" aria-label="Home"><!--[--><!--]--> Home <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/categories/ToDoList/1/" class="nav-link" aria-label="Notes"><!--[--><!--]--> Notes <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/tags/Vue/1/" class="nav-link" aria-label="Tags"><!--[--><!--]--> Tags <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/docs/" class="nav-link router-link-active" aria-label="work"><!--[--><!--]--> work <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/blogs/_List/info.html" class="nav-link" aria-label="周计划清单"><!--[--><!--]--> 周计划清单 <!--[--><!--]--></a></div><!--]--></nav><div class="appearance"><span>Appearance </span><a class="icon-container left btn-toggle-dark-mode" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:19px;height:19px;font-size:19px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"></path><path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2"></path><path d="M19 11h2m-1-1v2"></path></g></svg><!----></a></div></div><div class="sidebar-mask"></div><aside class="series-container"><!--[--><!--[--><section class="series-group series-item"><h5 class="series-heading active">工作相关</h5><ul><li><!--[--><a href="/blog/docs/work/info.html" class="nav-link series-item" aria-label="前端常用的网站"><!--[--><!--]--> 前端常用的网站 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/docs/work/zhanghaowangzhanheji.html" class="nav-link series-item" aria-label="账号网站合集"><!--[--><!--]--> 账号网站合集 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/docs/work/kwkj/info.html" class="nav-link series-item" aria-label="KWKJ"><!--[--><!--]--> KWKJ <!--[--><!--]--></a><!--]--></li><li><!--[--><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html" class="router-link-active router-link-exact-active nav-link router-link-active series-item active" aria-label="面试题"><!--[--><!--]--> 面试题 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/docs/work/macshangshiyongiterm2.html" class="nav-link series-item" aria-label="mac上使用iterm2"><!--[--><!--]--> mac上使用iterm2 <!--[--><!--]--></a><!--]--></li></ul></section><!--]--><!--]--></aside><!--[--><main class="page-container show-series show-catalog"><h1 class="page-title">面试题</h1><div class="page-info"><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="4"></circle><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->hh<!--]--></span></a><!----><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->前端<!--]--></span></a><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.5" cy="8.5" r="1" fill="currentColor"></circle><path d="M4 7v3.859c0 .537.213 1.052.593 1.432l8.116 8.116a2.025 2.025 0 0 0 2.864 0l4.834-4.834a2.025 2.025 0 0 0 0-2.864L12.29 4.593A2.025 2.025 0 0 0 10.859 4H7a3 3 0 0 0-3 3z"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->面试题<!--]--></span></a><!----></div><div class="theme-reco-default-content"><div><h2 id="vue中如何监测数组的变化" tabindex="-1"><a class="header-anchor" href="#vue中如何监测数组的变化" aria-hidden="true">#</a> vue中如何监测数组的变化</h2><blockquote><p><code>vue.set</code></p></blockquote><h2 id="什么是闭包-闭包的作用是什么" tabindex="-1"><a class="header-anchor" href="#什么是闭包-闭包的作用是什么" aria-hidden="true">#</a> 什么是闭包，闭包的作用是什么？</h2><blockquote><p>闭包就是能够读取其他函数内部变量的函数。</p></blockquote><h2 id="vue实现双向数据绑定原理是什么" tabindex="-1"><a class="header-anchor" href="#vue实现双向数据绑定原理是什么" aria-hidden="true">#</a> vue实现双向数据绑定原理是什么？</h2><blockquote><p>数据劫持 Object.defineProperty() 等</p></blockquote><h2 id="hash和history有什么区别" tabindex="-1"><a class="header-anchor" href="#hash和history有什么区别" aria-hidden="true">#</a> Hash和history有什么区别？</h2><blockquote><p>对seo更友好</p></blockquote><h2 id="什么是深拷贝和浅拷贝-以及怎么实现深拷贝和浅拷贝" tabindex="-1"><a class="header-anchor" href="#什么是深拷贝和浅拷贝-以及怎么实现深拷贝和浅拷贝" aria-hidden="true">#</a> 什么是深拷贝和浅拷贝?以及怎么实现深拷贝和浅拷贝??</h2><h2 id="什么是原型什么是原型链" tabindex="-1"><a class="header-anchor" href="#什么是原型什么是原型链" aria-hidden="true">#</a> 什么是原型什么是原型链?</h2><h2 id="箭头函数和普通函数有什么区别" tabindex="-1"><a class="header-anchor" href="#箭头函数和普通函数有什么区别" aria-hidden="true">#</a> 箭头函数和普通函数有什么区别?</h2><blockquote><p>1.箭头函数比普通函数更加简洁 如果没有参数，就直接写一个空括号即可 如果只有一个参数，可以省去参数括号<br> 如果有多个参数，用逗号分割 如果函数体的返回值只有一句，可以省略大括号<br> 如果函数体不需要返回值，且只有一句话，可以给这个语句前面加一个void关键字。<br> 最常用的就是调用一个函数： <code>let fn = () =&gt; void doesNotReturn()</code></p></blockquote><blockquote><p>2.箭头函数没有自己的this 箭头函数不会创建自己的this,所以它没有自己的this,它只会在自己作用域的上一层继承this。所以箭头函数中的this的指向在它在定义时一旦确定了，之后不会改变。</p></blockquote><blockquote><p>3.箭头函数继承来的this指向永远不会改变</p></blockquote><blockquote><p>4.call()、apply()、bind()等方法不能改变箭头函数中的this指向</p></blockquote><blockquote><p>5.箭头函数不能作为构造函数使用</p></blockquote><blockquote><p>6.箭头函数没有自己的arguments</p></blockquote><blockquote><p>7.箭头函数没有prototype</p></blockquote><blockquote><p>8.箭头函数不能用作Generator函数,不能使用yeild关键字</p></blockquote><h2 id="new操作符做了什么事情" tabindex="-1"><a class="header-anchor" href="#new操作符做了什么事情" aria-hidden="true">#</a> New操作符做了什么事情?</h2><blockquote><p>1、首先创建了一个新对象<br> 2、设置原型，将对象的原型设置为函数的prototype对象 3、让函数的this指向这个对象，执行构造函数的代码（为这个新对象添加属性） 4、判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象</p></blockquote><h2 id="说一下eventloop" tabindex="-1"><a class="header-anchor" href="#说一下eventloop" aria-hidden="true">#</a> 说一下eventloop？</h2><h2 id="promise是什么" tabindex="-1"><a class="header-anchor" href="#promise是什么" aria-hidden="true">#</a> Promise是什么？</h2><blockquote><p>Promise 是Js中进行异步编程的新解决方案 从语法上来说是一个构造函数哦 能获取成功或者失败返回的值<br> 异步编程：AJAX 定时器-&gt;setTimeout; new Promise 主要用在请求接口的时候 异步加载 有3种状态 pending(等待中)fulfilled(成功) rejected(失败); 状态改变的第一种情况 pending-&gt;fulfilled 状态改变的第二种情况 pending-&gt;rejected 状态改变的第三种情况 pending-&gt;rejected （用关键字 throw xx 抛出错误） 状态改变是不可逆的 并且是不能再一次改变的。 只能改变一次 。<br><code>.then(res =&gt;{}).catch(res=&gt;{}).finally(()=&gt;{不管成功还是失败都会执行的 可以用于关闭loading})</code></p></blockquote><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code>//Promise 同步 executor 同步
const p = new Promise ((resolve,reject) =&gt;{
  $.ajax({
    success:(data){
    resolve(data)
    }
  })
})
p.then((res)=&gt;{
console.log(ajax里面的res)//resolve
}).then((res)=&gt;{
console.log(ajax里面的res)//reject
})
//问题：为什么Promise执行是同步 p.then()是异步
//结论：Promise 的存在 是异步问题 同步化 最后解。  不阻塞不跟Promise 不相关的其他方法
async function a (){
  const a = await c()
  console.log(xxxx)
}
promise.all([]);必须全部通过 返回所有成功的数组
promise.race([]);只要有一个成功就会调用.then resolve 只要有一个失败就调用.then.reject;
--任务串联-&gt;链式调用--
p.then((res)=&gt;{
console.log(ajax里面的res)//resolve
}).then((res)=&gt;{
console.log(ajax里面的res)//reject
}).then((res)=&gt;{
console.log(ajax里面的res)//reject
}).then((res)=&gt;{
console.log(ajax里面的res)//reject
}).catch((res)=&gt;{
console.log(ajax里面的res)// 最后指定一个catch就可以
})
如果想中断promise联条 只能 return 一个 new promise(()=&gt;{});//pending 状态的promise 对象
手写promise 封装promise
执行器函数在promise内部是同步调用的 
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="vuex有哪些基本属性-为什么-vuex-的-mutation-中不能做异步操作" tabindex="-1"><a class="header-anchor" href="#vuex有哪些基本属性-为什么-vuex-的-mutation-中不能做异步操作" aria-hidden="true">#</a> Vuex有哪些基本属性?为什么 Vuex 的 mutation 中不能做异步操作?</h2><blockquote><p>有五种，分别是 State、 Getter、Mutation 、Action、 Module</p></blockquote><ol><li>state =&gt; 基本数据(数据源存放地)</li><li>getters =&gt; 从基本数据派生出来的数据</li><li>mutations =&gt; 提交更改数据的方法，同步</li><li>actions =&gt; 像一个装饰器，包裹mutations，使之可以异步。</li><li>modules =&gt; 模块化Vuex</li></ol><blockquote><p>1、Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样可以方便地跟踪每一个状态的变化，从而能够实现一些工具帮助更好地了解我们的应用。<br> 2、每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。</p></blockquote><h2 id="vue的生命周期是什么-每个钩子里面具体做了什么事情" tabindex="-1"><a class="header-anchor" href="#vue的生命周期是什么-每个钩子里面具体做了什么事情" aria-hidden="true">#</a> Vue的生命周期是什么 每个钩子里面具体做了什么事情</h2><blockquote><p>Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -&gt; 渲染、更新 -&gt; 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。</p></blockquote><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>  1、beforeCreate（创建前） ：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。  
  2、created（创建后） ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 `$el` 属性。  
  3、beforeMount（挂载前） ：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。  
  4、mounted（挂载后） ：在el被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html 页面中。此过程中进行ajax交互。  
  5、beforeUpdate（更新前） ：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染。  
  6、updated（更新后）：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。  
  7、beforeDestroy（销毁前） ：实例销毁之前调用。这一步，实例仍然完全可用，`this` 仍能获取到实例。  
  8、destroyed（销毁后） ：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。  
  另外还有 `keep-alive` 独有的生命周期，分别为 `activated` 和 `deactivated` 。用 `keep-alive` 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 `deactivated` 钩子函数，命中缓存渲染后会执行 `activated` 钩子函数。  
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="说一下vue3-0你了解多少" tabindex="-1"><a class="header-anchor" href="#说一下vue3-0你了解多少" aria-hidden="true">#</a> 说一下vue3.0你了解多少?</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>1.响应式原理的改变 Vue3.x 使用Proxy取代 Vue2.x 版本的Object.defineProperty  
2.组件选项声明方式Vue3.x 使用Composition API setup 是Vue3.x新增的一个选项，他是组件内使用Composition API 的入口  
3.模板语法变化slot具名插槽语法 自定义指令 v-model 升级  
4.其它方面的更改Suspense支持Fragment(多个根节点) 和Protal (在dom其他部分渲染组建内容)组件,针对一些特殊的场景做了处理。基于treeshaking优化，提供了更多的内置功能。  
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="说一下你对盒模型的理解" tabindex="-1"><a class="header-anchor" href="#说一下你对盒模型的理解" aria-hidden="true">#</a> 说一下你对盒模型的理解?</h2><blockquote><p>CSS3中的盒模型有以下两种:标准盒模型、IE盒模型</p></blockquote><p>盒模型都是由四个部分组成的,分别是margin、border、padding和content</p><p>标准盒模型和IE盒模型的区别在于设置width和height时, 所对应的范围不同 1、标准盒模型的width和height属性的范围只包含了content 2、IE盒模型的width和height属性的范围包含了border、padding和content</p><p>可以通过修改元素的box-sizing属性来改变元素的盒模型； 1、box-sizing：content-box表示标准盒模型（默认值） 2、box-sizing：border-box表示IE盒模型（怪异盒模型）</p><h2 id="webpack-的构建流程" tabindex="-1"><a class="header-anchor" href="#webpack-的构建流程" aria-hidden="true">#</a> webpack 的构建流程</h2><blockquote><p>初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler 编译：从 Entry 出发，针对每个 Module 串行调用对应的 Loader 去翻译文件的内容，再找到该 Module 依赖的 Module，递归地进行编译处理<br> 输出：将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中</p></blockquote><h2 id="v-for-和-v-if-的顺序" tabindex="-1"><a class="header-anchor" href="#v-for-和-v-if-的顺序" aria-hidden="true">#</a> v-for 和 v-if 的顺序</h2><blockquote><p>不推荐放在一起 或者可以拆分一下 先判断 再循环 或者可以做一个过滤 for的时候直接就是处理好的数据 filter</p></blockquote><p>vue2中 v-for优先 所以放在一起不会报错 会优先循环在判断是否展示<br> vue3中 v-if 优先 所以放在一起的时候就会报错 因为for的东西不存在了 就会</p><h2 id="vue的生命周期" tabindex="-1"><a class="header-anchor" href="#vue的生命周期" aria-hidden="true">#</a> vue的生命周期</h2><p>vue生命周期一共有8个阶段 <code>创建前 创建后 挂载前 挂载后 更新前 更新后 销毁前 销毁后</code> vue2和vue3比 vue3中的beforeDestroy 变成 beforeUnmount等 destoryed -&gt; unmounted<br> vue3中新增了2个调试钩子</p><h2 id="vue的双向绑定" tabindex="-1"><a class="header-anchor" href="#vue的双向绑定" aria-hidden="true">#</a> vue的双向绑定</h2><p>vue双向绑定是一个指令 v-model 当数据发生变化的时候 视图就会更新 视图中发生变化的时候 也能改变这个数值<br> v-model是一个语法糖 一般就相当于 :value 和 @input 用v-model 就是减少大量事件处理代码提高开发效率<br> v-model 一般是在表单上使用，除此之外 还可以在自定义组件上使用 表示某个值的输入和输出控制<br> input上绑定的时候 是把某个变量绑定在表单元素value上<br> 如果是checbox 就是true false<br> 如果是select 可以通过option设置一些特殊的值<br> vue3有变化 类似&quot;sync&quot;</p><h2 id="你知道-vue3-哪些新特性" tabindex="-1"><a class="header-anchor" href="#你知道-vue3-哪些新特性" aria-hidden="true">#</a> 你知道 vue3 哪些新特性</h2><p><code>composition API等</code></p><h2 id="reflect-反射很多object方法" tabindex="-1"><a class="header-anchor" href="#reflect-反射很多object方法" aria-hidden="true">#</a> Reflect 反射很多Object方法</h2><h2 id="document-createdocumentfragment-文档碎片-防止多次dom操作-保存在内存里面-可以关联appendchild" tabindex="-1"><a class="header-anchor" href="#document-createdocumentfragment-文档碎片-防止多次dom操作-保存在内存里面-可以关联appendchild" aria-hidden="true">#</a> document.createDocumentFragment() //文档碎片 防止多次dom操作 保存在内存里面 可以关联appendChild</h2><h2 id="event-stoppropagation-阻止事件向上冒泡" tabindex="-1"><a class="header-anchor" href="#event-stoppropagation-阻止事件向上冒泡" aria-hidden="true">#</a> event.stopPropagation 阻止事件向上冒泡</h2><h2 id="" tabindex="-1"><a class="header-anchor" href="#" aria-hidden="true">#</a></h2><p>const lis = list.getElementsByTagName(&quot;1i&quot;); //类数组 ListArray= Array.prototype.slice.call(lis);//类数组转换为数组</p><h2 id="vue-init-webpack-vuetest01" tabindex="-1"><a class="header-anchor" href="#vue-init-webpack-vuetest01" aria-hidden="true">#</a> vue init webpack vueTest01</h2><h2 id="说说模块化-或者-cmd-amd" tabindex="-1"><a class="header-anchor" href="#说说模块化-或者-cmd-amd" aria-hidden="true">#</a> 说说模块化 或者 CMD AMD</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>1、从JS诞生依赖的开发讲起，走JS文件调用越来越复杂，人们开始试图通过html文件来初步组织“模块化”的代码，但是为啥我JS模块化要依赖于你HTML，同时，对于程序的加载顺序和全局污染也带来了迫切的需求；（这个全局污染是不是被Java的封装降维打击了？）    
2、于是，nodejs创新的搞出了模块化，给开发者带来了前所未有的体验；CommonJS规范应运而生！但是，nodejs是服务器端，受限于过去生态中浏览器各家厂商谁看谁不顺眼，浏览器端怎么办？模块化多好啊  
3、于是，AMD YES！而RequireJS就是实现这个AMD规范的最佳范例，看代码的组织逻辑，确实过去的技术并不代表落后，我还是很喜欢RequireJS的代码组织逻辑和结构，感觉很像JAVA。（规范足够强，工程性就足够强！）  
4、同时，阿里也为程序员搞出了CMD规划，通用模块定义，实现方式是seajs。但是和requirejs相比，cmd是依赖就近，而AMD是依赖前置，这是个效率问题的改进。  
5、最终，ECMA“迫于压力”，为了程序员的幸福工作，推出了ES6模块化规范，import export！  
6、但是CommonJS和ES6模块由本质的区别，CommonJS是拷贝，类似于类的对象；而ES6是直接的引用；所以，一个是运行时加载，一个是编译时加载（当然这句话的理解还是停留在表面）；  
总结：  
模块化其实本质解决的是加载顺序和全局污染，当然还有代码复用等程序员开发遇到的现实问题；  
模块化最初尝试由nodejs提出，但是你不能只服务端啊，浏览器端也需要啊，于是AMD和CMD规范诞生；  
模块化这个工作，其实更应该是ECMA来搞啊，可惜你没想到web发展如此之快，也没想到浏览器霸主ie掉落神坛了，于是迫于压力，推出了ES6模块化（甚至想搞类Class也搞的不伦不类）。  
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="说一下vue优化" tabindex="-1"><a class="header-anchor" href="#说一下vue优化" aria-hidden="true">#</a> 说一下vue优化</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>1、v-for 正确设置key值 （更快的定位数据和diff 在数据更新之后 根据key 去找到相应的dom   
2、封装复用的模块（http请求）、组件（ui库）  
3、路由懒加载/组件的动态加载：component：() =&gt; import(&#39;./xxx.vue&#39;) 不一次性加载那么多  
4、productionSourceMap: false （生成map文件 、定位源码的。 一定要设置false  在  
5、启用gzip压缩，打包体积更小 （具体：productionGzip:true)    
6、keep-alive 缓存不活跃组件 例如用户信息这样的 更新的时候再去更新 :include=组件名称  
7、插件CDN方式引入，减小项目体积   
8、图片使用CDN地址，用iconfont 里面的css 避免使用图片；图片懒加载 插件vue-lazyload   
9、组件按需导入 比如你用elementUI的话  import {xxx} form &#39;element-ui&#39;  
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="获取全局对象" tabindex="-1"><a class="header-anchor" href="#获取全局对象" aria-hidden="true">#</a> 获取全局对象</h2><blockquote><p>web:window,self,frames,this,<br> node:global,<br> worker:self, 通用:globalThis</p></blockquote><h2 id="call-apply-bind-的this-等" tabindex="-1"><a class="header-anchor" href="#call-apply-bind-的this-等" aria-hidden="true">#</a> call apply bind 的this 等</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>var tt = {
    a:100
  }
  var tt2 = {
    a:3
  }
  function test (e,v){
    console.log(this.a,e,v);
  }
  const cc = (e,v) =&gt; {
    console.log(this.a,e,v)
  }
  test()//1
  test.call(tt,2,4) //100
  test.apply(tt,[2,4])//100
  let f = test.bind(tt,5,2)//100
  let w = f.bind(tt2,5,2)//100 (bind 第二次不生效哦)
  -以上是正常函数-
  -以下是箭头函数-
  f()
  w()
  cc();//1
  cc.call(tt) //1
  cc.apply(tt)//1
  var dd = cc.bind(tt2);//1
  dd();
  -箭头函数不支持任何形式的this指向的改变-
  new cc ();//报错 箭头函数不是一个构造器 不能new 
  tt2.newFun = () =&gt; {
    console.log(tt2);//tt2{a:3,newFun:f}
    console.log(this);//window
  }
  -箭头函数中的this不是谁绑定 就指向谁 -
   tt.newFun2 = function() {
    var h = ()=&gt;{
        console.log(this);
    }
    h()
  }
  tt.newFun2(); // tt:{a:100,newFun2:f} this指向tt;
  -箭头函数中的this不是谁绑定 就指向谁 -
  总结：
  1.箭头函数的this 指向 非箭头函数的 外层作用域的this指向；（外层的函数不能是箭头函数）
  2.普通函数 如果调用的时候没指向this 并且函数不在某个对象内 它的this都是window
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="箭头函数" tabindex="-1"><a class="header-anchor" href="#箭头函数" aria-hidden="true">#</a> 箭头函数</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code> &#39;use strict&#39;
function test1(){
  console.log(this)
}
test() //严格模式下 undefined  非严格模式下window
const test2 = () =&gt; {
  console.log(this)
}
test2() //严格模式下和非严格模式下 都是window 箭头函数如此
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="this-总结-27-28-也都是this相关哦" tabindex="-1"><a class="header-anchor" href="#this-总结-27-28-也都是this相关哦" aria-hidden="true">#</a> this 总结 27 28 也都是this相关哦</h2><blockquote><p>this指向的基本原则：谁调用宿主 this就是谁。<br> 对象方法内部的this 总是指向 最近的引用 字面量方式定义对象<br><code>Object.create(null);</code>没有__proto__没链儿</p></blockquote><h2 id="原型和原型链" tabindex="-1"><a class="header-anchor" href="#原型和原型链" aria-hidden="true">#</a> 原型和原型链</h2><blockquote><p>prototype - 原型<br><strong>proto</strong> - 内置对象 很多人都叫做 原型链（实际上就是原型的连接点 ）<br> 原型链是 由 __proto__链接起来的形成的链条⛓<br> 从属关系<br> *prototype 从属于 函数 它是函数的 一个属性 每一个函数都会默认有一个prototype的一个属性 就是一个普通对象{}<br> *<strong>proto</strong> 从属于 对象 它是对象Object的 一个属性 也是一个普通对象{}<br> 对象的__proto__保存着该对象的构造函数的prototype<br> function 和 Object 既是函数 又是对象<br> 每一个实例化的对象里面 constructor 里面 就是等于new 后面的函数 ===; constructor 是可以更改的；</p></blockquote><h2 id="js-变量-和-计算-相关" tabindex="-1"><a class="header-anchor" href="#js-变量-和-计算-相关" aria-hidden="true">#</a> js 变量 和 计算 相关</h2><blockquote><p>1.原始类型 let a = 10; let b = a;a = 20;console.log(b) =&gt;10<br> 2.引用类型 let a = {age:20};let b = a;consolo.log(b) =&gt; age:20;a.age = 21;console.log(b) -&gt; age:21<br> 3.手写深拷贝</p></blockquote><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>let str = {
    name:&#39;xiaowu&#39;,
    age:8,
    children:{
      name:&#39;xiaowuMM&#39;
    }
  }
  &lt;!-- let str2 = str; --&gt;
  &lt;!-- str2.name = &#39;xiaohei&#39;; --&gt;
  &lt;!-- console.log(str.name);//xiaohei --&gt;
  &lt;!-- console.log(str2.name)//xiaohei --&gt;
    let str3 = deepClone(str);
  str3.name = &#39;xiaopang&#39;;
  console.log(str.name);//xiaowu
  console.log(str3.name)//xiaopang
  str3.children.name = &#39;xiaopangMM&#39;;
  console.log(str.children.name)//xiaowuMM
  console.log(str3.children.name)//xiaopangMM
  function deepClone(str){
    if(typeof str == &#39;string&#39; || str == null){
      return str
    }
    let newStr = {};
    for(s in str){
      if(str.hasOwnProperty(s)){
        newStr[s] = deepClone(str[s])
      }
    }
    return newStr;
  }
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="分析打包vue打包的插件-github-webpack-bundle-analyzer" tabindex="-1"><a class="header-anchor" href="#分析打包vue打包的插件-github-webpack-bundle-analyzer" aria-hidden="true">#</a> 分析打包vue打包的插件 github:webpack-bundle-analyzer</h2><h2 id="多行文字垂直居中" tabindex="-1"><a class="header-anchor" href="#多行文字垂直居中" aria-hidden="true">#</a> 多行文字垂直居中</h2><blockquote><p>father{display:table};son{display:table-cell;vertical-align:middle;}</p></blockquote><h2 id="阻止冒泡" tabindex="-1"><a class="header-anchor" href="#阻止冒泡" aria-hidden="true">#</a> 阻止冒泡</h2><blockquote><p>event.stopPropagation(); //1.停止事件冒泡，但是不会阻止默认行为<br> return false; // 2.阻止事件冒泡，也阻止了默认行为 event.preventDefault(); // 3.阻止默认行为，不阻止事件冒泡</p></blockquote><h2 id="es6-解构" tabindex="-1"><a class="header-anchor" href="#es6-解构" aria-hidden="true">#</a> ES6 解构</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>  const obj = {
    name:&#39;zhangsan&#39;,
    age:18,
    newObj:{
      newName:&#39;lisi&#39;
    }
  }
  const {name,age} = obj;
  console.log(name,age) // zhangsan // 18
  const {name:newName_,newObj:{newName}} = obj; 
  console.log(newName_,newName)//zhangsan //lisi
  const {name:newName_,newObj:{newName : newnew}} = obj; 
  console.log(newName_,newnew)//zhangsan //lisi

数组解构
const arr = [1,2,3];
const [a,b,c] = arr;
console.log(a,b,c) //  1,2,3,
乱序解构
const arr = [11,22,33];
const {0:a,2:b,1:c} = arr; // 11 33 22 冒号前面是索引
浅拷贝
const arr = [1,2,3];
const arr2 = [...arr]//浅拷贝
const str = {1,2,3}
const str2 = {...str}//浅拷贝
拼接数组
const arr1 = [1,2]
const arr2 = [3,4]
以前：const arr3 = arr1.concat(arr2)
现在：const arr4 = [..arr1,...arr2]
代替Object.assign
const obj2 = {age:28};
以前：const obj3 = Object.assign(obj,obj2)
现在：const obj4 = {...obj1,...obj2}
函数默认参数
function a (f,s){
    console.log(f,s)
}
a()//undefined
1.变量提升
var age = 11;
console.log(age) =&gt;11;
上面是一个情况
console.log(age);//undefined
var age = 34;
相当于
var age;
console.log(age)
age = 34;//变量提升
结论--&gt; var 是有变量提升的 let 和 const 是没有的
2.变量修改
var age = 11;age = 12;console.log(age)//12;
let age = 11;age = 12;console.log(age)//12;
const age = 11;age = 12;console.log(age)//报错const 一个常量 是 不能修改的 除非是一个对象
const str = {name:&#39;111&#39;};str.age = 18;str.name = 222;console.log(str)//18 222 //const对象是 可以修改的 但是
const str = {name:&#39;111&#39;};str = {};console.log(str)//报错 不能修改对象的指针；
3.for 问题
    for(var i=0;i&lt;5;i++){
        setTimeout(() =&gt;{
            console.log(i)
        })
    }
//结果是55555 因为 setTimeout是一个异步任务 等setTimeout执行的时候 for已经走完了 i已经变成5了 5个定时器之后就会输出5个5
//解决办法是 把 var 变成let 就可以了 ； 牛逼！
4.暂时性死区
var age = 8;
if(true){
    console.log(age);//8
    var age = 38;//如果这里是let或者const 会报错 ；
}
--async/await--
    async 是 函数的一个修饰符需要在函数身上 await 需要用在async函数里面
eg:
    const func1 = (params)=&gt;{
        return new Promise(resolve =&gt;{
            resolve(`${params.userName}你很帅`)
        })
    }
const func2 = (params)=&gt;{
    return new Promise(resolve =&gt;{
        resolve(`${params}，但很菜`)
    })
}
const handleSome = async() =&gt; {
    const res = await func1({
        userName:&#39;name&#39;,
        password:&#39;123456&#39;
    })
    const info = await func2(res);
    console.log(info)
}
handleSome()//实际没学会 哈哈哈哈 
//async await 实际上 用了同步的方式 去执行异步操作 实现了排队的操作  默认会返回一个promise值 这个值 是函数的返回值
---可选链和合并运算符---
可选链
数组
const arr = null;
以前 if(arr &amp;&amp; arr.length)
    现在 if(arr?.length) //如果arr存在的话 会找length 并且返回 如果不存在的话 返回undefined
    以前 const a =(arr &amp;&amp; arr[0]);
现在 const a = list?.[0]
-------啊哦----------------
    对象
const obj = {
    cat:{
        name:cat,
        age:8
    }
}
以前 const cat = obj &amp;&amp; obj.cat &amp;&amp; obj.cat.name
现在 const cat = obj?.cat?.name // 存在就继续往下找 没有的就返回undefined
函数
const fn = null;
以前 const a = fn &amp;&amp; ();if(a);
现在 const a = fn?.()//存在的话就运行
合并运算
以前：
  const a = 0 || &#39;名字&#39; //名字
const b = &#39;&#39; || ‘名字’ //名字
const c = false || ‘名字’ //名字
const d = undefined || ‘名字’ //名字
const e = null || ‘名字’ //名字
现在:
    const a = 0 ?? &#39;名字&#39; //0
const b = &#39;&#39; ??‘名字’ //&#39;&#39;
const c = false ?? ‘名字’ //false
const d = undefined ?? ‘名字’ //名字
const e = null ??‘名字’ //名字
总结：空位运算符 ？？ 只会把 null 和 undefined 当成假值 false 和&#39;&#39; 和 0 均不是假值 ；
  reduce 方法
const arr = [1,2,3,4,5,6];
如果想做1+2+3+4+5+6 以前肯定是先var 一个变量 然后for循环 然后 ++ 然后console
现在 用reduce 就够了
const result = arr.reduce((pre,next)=&gt;{
    return pre + next
})
console.log(result);1+2+3+4+5+6 = 21;
const result = arr.reduce((pre,next)=&gt;{
    return pre + next
},10)
console.log(result);10+1+2+3+4+5+6 = 31;
数组去重
const arr = [1,2,34,4,5,6,6,3,1,1,2,3,1];
const res = [];
arr.reduce((pre,next)=&gt;{
    if(!pre.get(next)){
        pre.set(next,1);
        res.push(next)
    }
    return pre
},new Map())
-Object.values;-
const str = {
    name:&#39;hei&#39;,
    age:6
}
如果想输出 name age 方法可以是 for in
    也可以是 遍历Object.keys;
es6：
  const val = Object.values(obj)
val =&gt; [&#39;hei&#39;,6]
Object.value 可以把对象中的值 合并成一个数组；
  -求幂运算符-
  //3*3*3*3*3=？
  es5 =&gt; Math.pow(3,5);第一个参数是要*的数 第二个参数是 *几次
es6 =&gt; 3 ** 5 (跟上面是一个意思哦)
    -includes -
const str = &#39;你是大傻瓜&#39;
const arr = [1,2,3,4,5]
//如果想判断str上 有没有 某些 值 
es6 =&gt; str.includes(&#39;哦&#39;) 有就 true 没有就 false
//如果想判断arr上 有没有 某些 值
es5 =&gt; arr.indexOf(&#39;哦&#39;) 有就是index 没有就是 -1
es6 =&gt; arr.includes(&#39;哦&#39;) 有就 true 没有就 false
区别是 indexOf 判断不了NaN Includes 可以
-find 和 findIndex - 是用来寻找某一项符合标准的索引值
const arr = [
    {name:xiaowang,age:19},
    {name:xiaoli,age:39},
    {name:xiaozhao,age:29},
]
如果我想找到name是xiaozhao的那个索引值 我将
es6 =&gt; arr.findIndex(item =&gt; item.name === &#39;xiaozhao&#39;);
es6 =&gt; arr.findIndex({name} =&gt; name === &#39;xiaozhao&#39;);
find 和 findeIndex 一样的 只不过find 返回的是item findexIndex 返回的是index；
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="js中的各种循环" tabindex="-1"><a class="header-anchor" href="#js中的各种循环" aria-hidden="true">#</a> js中的各种循环</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>const arr = [1,2,3,4,5,6,7,8,9,1,2,3];
   arr,forEach((item,index,arr) =&gt; {
    console.log(item)
   })
   如何跳出循环 
   forEach中 return / break 是不能跳出循环的 forEach 里面是没有break关键字的 会报错哦; forEach里面的每一次循环都是一个函数 所以不会跳出循环 真的要跳出循环的话可以试用try catch;
    -map-
    map 就是修改数组的每一项 并且不影响元素属性 然后返回一个新数组 数组之间不受影响。
    arr.map((item) =&gt; {
      return item *2
    })
    -filter-
    filter 就是将原 数组过滤出符合他条件的一个新数组 里面要写 一个 判断语句 是true的 会返回该item 不可以的就被过滤掉了哦
    -some-接收一个布尔值 一个数组只要有一个符合条件的就可以 返回的是布尔值
    arr.some(item =&gt; item&gt;3)   =&gt;  true
    -every-接收一个布尔值 一个数组必须要数组里的所有数据都符合条件的才可以  返回的是布尔值
    arr.every(it em =&gt; item&gt;3)  =&gt; false

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="es6中的箭头函数" tabindex="-1"><a class="header-anchor" href="#es6中的箭头函数" aria-hidden="true">#</a> es6中的箭头函数</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>  以前我们都是 function a(){}; a(); 即可调用函数
  箭头函数就是 const c = （item）=&gt; {}; a(); 只有一个参数的时候 可以省略括号 没参数或者多参数都不能省略括号
  箭头函数必须是有一个参数 来接受 不能以funtion来定义 简写的话是 ：
  const f = item =&gt; `折行数据是${item}` ;
  f(&#39;aaa&#39;)//这行数据是aaa;
  虽然可以简写return 的内容 但是return 的内容只能是字符串 不能是对象 因为如果是{} 会默认处理为函数
  箭头函数是自己没有this的  也没有arguments
  箭头函数不能当做构造函数
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="箭头函数的区别-构造函数" tabindex="-1"><a class="header-anchor" href="#箭头函数的区别-构造函数" aria-hidden="true">#</a> 箭头函数的区别* 构造函数</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code> 1.箭头函数没有原型 原型是undefined
  2.箭头函数this指向全局对象 而函数指向引用对象
  3.call，apply，bind方法改变不了箭头函数的指向
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="jq和vue什么区别" tabindex="-1"><a class="header-anchor" href="#jq和vue什么区别" aria-hidden="true">#</a> jq和vue什么区别</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>  Vue.js 一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。它相比我们传统的前端开发，如使用 jQuery 等前端库直接修改 DOM，大大简化了代码量。特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触 DOM，这样的代码非常利于维护。
  vue数据驱动
  jq控制dom元素
  简单或者很少dom元素 如果对比两者看上去差距不大 dom元素和操作的多，就会发现vue更加方便简洁
  vue渲染优雅，代码易维护
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="数据类型" tabindex="-1"><a class="header-anchor" href="#数据类型" aria-hidden="true">#</a> 数据类型</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>  1.基本数据类型  string Number Null undefined boolean symbol 存储在栈中 
    2.引用数据类型  object 存储在堆里 只能操作栈里面的地址 
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="谈谈你对mvvm的理解" tabindex="-1"><a class="header-anchor" href="#谈谈你对mvvm的理解" aria-hidden="true">#</a> 谈谈你对MVVM的理解？</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>mvc 是 在页面中操作  访问后端路由  所有操作都要经过controller 就会位维护困难
  MVVM 就是 model view （viewModel 简化controller）传统的mvvm 要求 不能手动操作视图更新。但是vue 有ref可以手动更新视图。
  响应式是单向的 只能数据影响视图 

  vue 和react 
  react 是 
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="vue2和vue3中响应式数据的理解。" tabindex="-1"><a class="header-anchor" href="#vue2和vue3中响应式数据的理解。" aria-hidden="true">#</a> vue2和vue3中响应式数据的理解。</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>响应式数据的核心就是数据变化了我能知道。

 vue2采用了defineProperty 将数据定义成了响应式数据 核心就是拦截所有属性 有getter 和setter方法 缺陷就是要递归构建。 不存在的属性不能被监控。
 vue3采用了proxy直接可以对对象拦截。不用重写get和set方法 性能高 不需要直接递归。 对数组并没有采用defineProperty 因为数组种可能数组很长 但是用户不会直接操作索引更改数据 
 vue2中 减少数据层级 不要嵌套过深 
 如果不需要响应式 或者不是响应式的数据 就不要放在data中。
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="vue中如何进行依赖收集" tabindex="-1"><a class="header-anchor" href="#vue中如何进行依赖收集" aria-hidden="true">#</a> vue中如何进行依赖收集</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>依赖收集的目的是什么 --&gt;数据变化了可以更新视图。 每一个收集的属性都有一个dep属性。 每一个对象也都有一个dep属性。每一个组件在渲染的过程中都会创建一个叫渲染watcher （1，渲染watcher 2.计算属性watcher 3.用户watcher）。一个属性可能会有多个watcher。反过来 1个watcher 有多个dep。
  当调用取值方法的时候如果有watcher 就会将watcher 收集起来。
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="reduce-的骚操作" tabindex="-1"><a class="header-anchor" href="#reduce-的骚操作" aria-hidden="true">#</a> reduce 的骚操作</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>  let arr = [1,2,3,4,5,6,78,9,97,54,234]; 
  &lt;!-- 1.数组累加 --&gt;
  arr.reduce((init,next)=&gt;{
    return init + next
  })
   &lt;!-- 2.找出数组最大值 --&gt;
   arr.reduce((init,next)=&gt;{
    return init&gt;next?init:next
   },0)

   arr.reduce((init,next)=&gt;{
    return Math.max(init,next)
   },0)

   Math.max(...[1, 2, 3, 4, 5, 6, 7, 8]);

   &lt;!-- 3. 处理不规则数组--&gt;
  let data = [
    [&quot;红色&quot;,&quot;128g&quot;, &quot;苹果手机&quot;],
    [&quot;南北&quot;,&quot;两室一厅&quot;,&quot;128㎡&quot;,&quot;洋房住宅&quot;],
    [&quot;小米&quot;,&quot;白色&quot;,&quot;智能运动手表&quot;,&quot;心率血压血氧&quot;,&quot;来电信息提醒&quot;], 
    [&quot;官方发售&quot;,&quot;2020年秋季&quot;,&quot;篮球&quot;,&quot;球鞋&quot;,&quot;品牌直邮&quot;]UAN
  ]

  data.map((item)=&gt;{
    item.reduce((i,n)=&gt;`${i}+${n}`)

  })
  &lt;!-- 4. 删除数据重复项 --&gt;
  let array = [1, 2, 3, &#39;a&#39;, &#39;b&#39;, &#39;c&#39;, 1, 2, 3, &#39;a&#39;, &#39;b&#39;, &#39;c&#39;];
  array.reduce((arr,next)=&gt;{
    if(arr.indexOf(next)==-1){
      arr.push(next)
    }
    return arr
  },[])
  &lt;!-- 5. 验证括号是否合法 --&gt;
  let nArr = [&quot;(())()(()())&quot;];
  [...nArr].reduce((a,i)=&gt;a===&#39;(&#39;?a++:a--,0)
  &lt;!-- 6. 按属性分组
  按照指定key将数据进行分组，这里我用国家字段分组，
  在每次迭代过程中检查当前国家是否存在，如果不存在创建一个数组，将数据插入到数组中。并返回数组。
  --&gt;
  let obj = [
    {name: &#39;张三&#39;, job: &#39;数据分析师&#39;, country: &#39;中国&#39;},
    {name: &#39;艾斯&#39;, job: &#39;科学家&#39;, country: &#39;中国&#39;},
    {name: &#39;雷尔&#39;, job: &#39;科学家&#39;, country: &#39;美国&#39;},
    {name: &#39;鲍勃&#39;, job: &#39;软件工程师&#39;, country: &#39;印度&#39;},
  ]
  obj.reduce((a,i)=&gt;{
    if(!Array.isArray(a[i.country])){
      a[i.country]=[];
    }
    a[i.country].push(i)
    return a;
  },[])
  &lt;!-- 7. 数组扁平化 --&gt;
  let tArr = [[3, 4, 5], [2, 5, 3], [4, 5, 6]];
  tArr.reduce((a,i)=&gt;{
    return a.concat(i);;
  },[])
  [[3, 4, 5], [2, 5, 3], [4, 5, 6]].reduce((singleArr, nextArray) =&gt; singleArr.concat(nextArray), [])
  let arr = [1, [2, 3, [4, 5, [12, 3, &quot;zs&quot;], 7, [8, 9, [10, 11, [1, 2, [3, 4]]]]]],234].flat(Infinity)

  es6中的数组扁平化 flat(层级 全部扁平用Infinity);

  &lt;!-- 8.反转字符串 --&gt;
  let obj2 = &quot;abcdefghijklmnopqrstuvwxyz&quot;;
  [...obj2].reduce((a,i)=&gt;i+a);
  [...obj2].reverse().join(&#39;&#39;);

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="websocket相关-老浏览器不支持" tabindex="-1"><a class="header-anchor" href="#websocket相关-老浏览器不支持" aria-hidden="true">#</a> websocket相关 老浏览器不支持</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>  #事件
  1.open
  2.close
  3.error
  4.message
  5.connection

  #前端
  1.open
  2.close
  3.error
  4.message
  需要2个试图
  1.entry.html  可 localStorgae
  输入 username  进入 chattingroom
  2.index.html 
  有一个list 展示message 
  input 发送的message 
  button send 数据 

  #后端
  1.open
  2.close
  3.error
  4.message
  5.connection

ws/nodejs-websocket 
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="组件之间传参" tabindex="-1"><a class="header-anchor" href="#组件之间传参" aria-hidden="true">#</a> 组件之间传参</h2><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>父子组件 props/$emit/$parent/ref/$attrs
兄弟组件 $parent/$root/eventbus/vuex
跨层级关系 eventbus/vuex/provide+inject
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></div><footer class="page-meta"><div class="meta-item edit-link"><a class="icon-container left meta-item-label" href="https://gitee.com/i77ing/blog.git/edit/master/docs/work/面试题2022111401.md" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-3"></path><path d="M9 15h3l8.5-8.5a1.5 1.5 0 0 0-3-3L9 12v3"></path><path d="M16 5l3 3"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Edit this page<!--]--></span></a></div><div class="meta-item last-updated"><a class="icon-container left meta-item-label" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.795 21H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4"></path><circle cx="18" cy="18" r="4"></circle><path d="M15 3v4"></path><path d="M7 3v4"></path><path d="M3 11h16"></path><path d="M18 16.496V18l1 1"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Last Updated 2023-02-23 19:57:37<!--]--></span></a></div></footer><nav class="page-nav"><p class="hasPrev hasNext inner"><span class="page-nav-item prev"> ← KWKJ</span><span class="page-nav-item next">mac上使用iterm2 → </span></p></nav><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">ON THIS PAGE</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#vue中如何监测数组的变化" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="vue中如何监测数组的变化"><!--[--><!--]--> vue中如何监测数组的变化 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#什么是闭包-闭包的作用是什么" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="什么是闭包，闭包的作用是什么？"><!--[--><!--]--> 什么是闭包，闭包的作用是什么？ <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#vue实现双向数据绑定原理是什么" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="vue实现双向数据绑定原理是什么？"><!--[--><!--]--> vue实现双向数据绑定原理是什么？ <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#hash和history有什么区别" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="Hash和history有什么区别？"><!--[--><!--]--> Hash和history有什么区别？ <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#什么是深拷贝和浅拷贝-以及怎么实现深拷贝和浅拷贝" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="什么是深拷贝和浅拷贝?以及怎么实现深拷贝和浅拷贝??"><!--[--><!--]--> 什么是深拷贝和浅拷贝?以及怎么实现深拷贝和浅拷贝?? <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#什么是原型什么是原型链" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="什么是原型什么是原型链?"><!--[--><!--]--> 什么是原型什么是原型链? <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#箭头函数和普通函数有什么区别" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="箭头函数和普通函数有什么区别?"><!--[--><!--]--> 箭头函数和普通函数有什么区别? <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#new操作符做了什么事情" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="New操作符做了什么事情?"><!--[--><!--]--> New操作符做了什么事情? <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#说一下eventloop" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="说一下eventloop？"><!--[--><!--]--> 说一下eventloop？ <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#promise是什么" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="Promise是什么？"><!--[--><!--]--> Promise是什么？ <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#vuex有哪些基本属性-为什么-vuex-的-mutation-中不能做异步操作" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="Vuex有哪些基本属性?为什么 Vuex 的 mutation 中不能做异步操作?"><!--[--><!--]--> Vuex有哪些基本属性?为什么 Vuex 的 mutation 中不能做异步操作? <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#vue的生命周期是什么-每个钩子里面具体做了什么事情" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="Vue的生命周期是什么 每个钩子里面具体做了什么事情"><!--[--><!--]--> Vue的生命周期是什么 每个钩子里面具体做了什么事情 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#说一下vue3-0你了解多少" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="说一下vue3.0你了解多少?"><!--[--><!--]--> 说一下vue3.0你了解多少? <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#说一下你对盒模型的理解" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="说一下你对盒模型的理解?"><!--[--><!--]--> 说一下你对盒模型的理解? <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#webpack-的构建流程" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="webpack 的构建流程"><!--[--><!--]--> webpack 的构建流程 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#v-for-和-v-if-的顺序" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="v-for 和 v-if 的顺序"><!--[--><!--]--> v-for 和 v-if 的顺序 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#vue的生命周期" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="vue的生命周期"><!--[--><!--]--> vue的生命周期 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#vue的双向绑定" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="vue的双向绑定"><!--[--><!--]--> vue的双向绑定 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#你知道-vue3-哪些新特性" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="你知道 vue3 哪些新特性"><!--[--><!--]--> 你知道 vue3 哪些新特性 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#reflect-反射很多object方法" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="Reflect 反射很多Object方法"><!--[--><!--]--> Reflect 反射很多Object方法 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#document-createdocumentfragment-文档碎片-防止多次dom操作-保存在内存里面-可以关联appendchild" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="document.createDocumentFragment() //文档碎片 防止多次dom操作 保存在内存里面 可以关联appendChild"><!--[--><!--]--> document.createDocumentFragment() //文档碎片 防止多次dom操作 保存在内存里面 可以关联appendChild <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#event-stoppropagation-阻止事件向上冒泡" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="event.stopPropagation 阻止事件向上冒泡"><!--[--><!--]--> event.stopPropagation 阻止事件向上冒泡 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label><!--[--><!--]-->  <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#vue-init-webpack-vuetest01" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="vue init webpack vueTest01"><!--[--><!--]--> vue init webpack vueTest01 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#说说模块化-或者-cmd-amd" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="说说模块化 或者 CMD AMD"><!--[--><!--]--> 说说模块化 或者 CMD AMD <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#说一下vue优化" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="说一下vue优化"><!--[--><!--]--> 说一下vue优化 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#获取全局对象" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="获取全局对象"><!--[--><!--]--> 获取全局对象 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#call-apply-bind-的this-等" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="call apply bind 的this 等"><!--[--><!--]--> call apply bind 的this 等 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#箭头函数" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="箭头函数"><!--[--><!--]--> 箭头函数 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#this-总结-27-28-也都是this相关哦" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="this 总结 27 28 也都是this相关哦"><!--[--><!--]--> this 总结 27 28 也都是this相关哦 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#原型和原型链" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="原型和原型链"><!--[--><!--]--> 原型和原型链 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#js-变量-和-计算-相关" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="js 变量 和 计算 相关"><!--[--><!--]--> js 变量 和 计算 相关 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#分析打包vue打包的插件-github-webpack-bundle-analyzer" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="分析打包vue打包的插件 github:webpack-bundle-analyzer"><!--[--><!--]--> 分析打包vue打包的插件 github:webpack-bundle-analyzer <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#多行文字垂直居中" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="多行文字垂直居中"><!--[--><!--]--> 多行文字垂直居中 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#阻止冒泡" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="阻止冒泡"><!--[--><!--]--> 阻止冒泡 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#es6-解构" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="ES6 解构"><!--[--><!--]--> ES6 解构 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#js中的各种循环" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="js中的各种循环"><!--[--><!--]--> js中的各种循环 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#es6中的箭头函数" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="es6中的箭头函数"><!--[--><!--]--> es6中的箭头函数 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#箭头函数的区别-构造函数" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="箭头函数的区别* 构造函数"><!--[--><!--]--> 箭头函数的区别* 构造函数 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#jq和vue什么区别" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="jq和vue什么区别"><!--[--><!--]--> jq和vue什么区别 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#数据类型" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="数据类型"><!--[--><!--]--> 数据类型 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#谈谈你对mvvm的理解" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="谈谈你对MVVM的理解？"><!--[--><!--]--> 谈谈你对MVVM的理解？ <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#vue2和vue3中响应式数据的理解。" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="vue2和vue3中响应式数据的理解。"><!--[--><!--]--> vue2和vue3中响应式数据的理解。 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#vue中如何进行依赖收集" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="vue中如何进行依赖收集"><!--[--><!--]--> vue中如何进行依赖收集 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#reduce-的骚操作" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="reduce 的骚操作"><!--[--><!--]--> reduce 的骚操作 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#websocket相关-老浏览器不支持" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="websocket相关 老浏览器不支持"><!--[--><!--]--> websocket相关 老浏览器不支持 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/docs/work/mianshiti2022111401.html#组件之间传参" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="组件之间传参"><!--[--><!--]--> 组件之间传参 <!--[--><!--]--></a></li><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/blog/assets/app.af94fc38.js" defer></script>
  </body>
</html>
